<script>
	import SyncedBrushWrapper from '../../_components/SyncedBrushWrapper.percent-range.svelte';

	// This example loads csv data as json and converts numeric columns to numbers using @rollup/plugin-dsv. See vite.config.js for details
	import pointsOne from '../../_data/points.csv';
	import pointsTwo from '../../_data/pointsTwo.csv';
	import pointsThree from '../../_data/pointsThree.csv';
	import pointsFour from '../../_data/pointsFour.csv';

	let brushExtents = $state([null, null]);

	const xKey = 'myX';
	const yKey = 'myY';

	const datasets = [pointsOne, pointsTwo, pointsThree, pointsFour];

	datasets.forEach(dataset => {
		dataset.forEach(d => {
			d[yKey] = +d[yKey];
		});
	});

	const colors = ['#00e047', '#00bbff', '#ff00cc', '#ffcc00'];
</script>

<div class="small-multiple-container">
	{#each datasets as dataset, i}
		<SyncedBrushWrapper
			data={dataset}
			{xKey}
			{yKey}
			bind:min={brushExtents[0]}
			bind:max={brushExtents[1]}
			stroke={colors[i]}
		/>
	{/each}
</div>

<style>
	/*
		The wrapper div needs to have an explicit width and height in CSS.
		It can also be a flexbox child or CSS grid element.
		The point being it needs dimensions since the <LayerCake> element will
		expand to fill it.
	*/
	.small-multiple-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
	}
</style>
